@include("admin.header")
  
  <body>
    <div class="x-body">
        <form class="layui-form" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label for="order_number" class="layui-form-label">
                    <span class="x-red">*</span>订单编号
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="text" id="order_number" name="order_number" required lay-verify="required"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="user_id" class="layui-form-label">
                    <span class="x-red">*</span>用户名
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="text" id="user_name" name="user_name" required lay-verify="required"
                        autocomplete="off" class="layui-input">
                    <ul class="uname">
                    </ul>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="consignee" class="layui-form-label">
                    <span class="x-red">*</span>收货人
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="text" id="consignee" name="consignee" required lay-verify="required"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="address" class="layui-form-label">
                    <span class="x-red"></span>收货地址
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input class="layui-input"  name="address" id="address" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="sex" class="layui-form-label">
                    <span class="x-red">*</span>性别
                </label>
                <div class="layui-input-inline">
                    <select id="sex" name="sex" class="valid">
                        <option value="">请选择</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="telephone" class="layui-form-label">
                    <span class="x-red">*</span>收货人手机
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="text" id="telephone" name="telephone" required lay-verify="required"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="express" class="layui-form-label">
                    <span class="x-red">*</span>快递方式
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <select id="express" name="express" class="valid">
                        <option value="">请选择</option>
                        @foreach($express as $val)
                            <option value="{{$val->express_id}}">{{$val->express_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="pay_price" class="layui-form-label">
                    <span class="x-red">*</span>支付金额
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <input type="number" id="pay_price" name="pay_price" required lay-verify="required"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="is_pay" class="layui-form-label">
                    <span class="x-red">*</span>支付状态
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <select id="is_pay" name="is_pay" class="valid">
                        <option value="">请选择</option>
                        <option value="2">已支付</option>
                        <option value="1">未支付</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="is_sign" class="layui-form-label">
                    <span class="x-red">*</span>签收状态
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <select id="is_sign" name="is_sign" class="valid">
                        <option value="">请选择</option>
                        <option value="2">已签收</option>
                        <option value="1">未签收</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="is_consign" class="layui-form-label">
                    <span class="x-red">*</span>发货状态
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                    <select id="is_consign" name="is_consign" class="valid">
                        <option value="">请选择</option>
                        <option value="2">已发货</option>
                        <option value="1">未发货</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="consign_time" class="layui-form-label">
                    <span class="x-red"></span>发货时间
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                <input class="layui-input"  name="consign_time" id="consign_time" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="sign_time" class="layui-form-label">
                    <span class="x-red"></span>签收时间
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                <input class="layui-input"  name="sign_time" id="sign_time" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="order_addtime" class="layui-form-label">
                    <span class="x-red">*</span>添加时间
                </label>
                <div class="layui-input-inline" style="width: 400px;">
                <input class="layui-input"  name="order_addtime" id="order_addtime" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button  class="layui-btn" lay-filter="add" lay-submit="" id="sub">
                    添加
                </button>
            </div>
      </form>
    </div>
    <div class="alert">
        提示信息
      </div>
      <style>
        .alert{
          position: fixed;
          width: 280px;
          height: 50px;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 9999;
          color: #fff;
          text-align: center;
          line-height: 50px;
          font-size: 16px;
          display: none;
        }
      </style>
    <script>
        var user_id = "";
        //重置分页的样式
        function resetpage(){
            //把span标签改成a标签
            var spans = parent.$('.page-item span');
            for (let i = 0; i < spans.length; i++) {
                spans[i].outerHTML="<a href=''>"+spans[i].innerHTML+"</a>";
            }
            var arr = parent.$(".page-item a");
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].innerHTML=="‹") {
                    arr[i].className = "prev";
                }else if(arr[i].innerHTML=="›"){
                    arr[i].className = "next";
                }
            }
            //将当前页设置为active
            parent.$(".active a").attr("class","num active");
            //把li 上面的active 去除
            parent.$("li.active").removeClass("active");
            //给页码a标签换类名
            parent.$(".page-item .page-link").attr("class","num");
        }
        //更新父级窗口的数据
        function getGoodData(page){
          $.ajax({
              type:"get",
              url:"{{url('/admin/toget_order_list')}}",
              data:"page="+page,
              dataType:"html",
              success:function(res){
                parent.$(".list").html(res);
                resetpage();
                parent.layui.element.render();
                parent.layui.form.render();
              }
          })
        }
        //请求接口获取所有数据的条数
        function getCount(){
          $.ajax({
              type:"get",
              url:"{{url('/admin/toget_order_count')}}",
              data:"",
              dataType:"text",
              success:function(res){
                parent.$("#count").html("共有订单："+res+" 个");
              }
          })
        }
        
        layui.use(['form','layer','laydate'], function(){
            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#sign_time' //指定元素
            });
            laydate.render({
                elem: '#consign_time' //指定元素
            });
            laydate.render({
                elem: '#order_addtime' //指定元素
            });
            //监听提交
            form.on('submit(add)', function(data){
                data.field.user_id = user_id;
                console.log(data.field);
                $.ajax({
                    url:"/admin/todo_addorder",
                    type:"post",
                    data: data.field,
                    dataType:"json",
                    success: function(res) {
                        if(res.code==1){
                            getGoodData(1);
                            getCount();
                            console.log(parent);
                            layer.alert(res.msg,function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                //关闭当前frame
                                parent.layer.close(index);
                            });
                        }else{
                            layer.alert(res.msg);
                        }
                    },
                    error:function(data) {
                        $(".alert").html("服务器错误！").css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
                            setTimeout(function () {
                            $(".alert").fadeOut(500);
                        },2000)
                    }
                });
                //发异步，把数据提交给php
                
                return false;
            });
        });
        $("#user_name").bind('input',function(){
            var uname = $(this).val();
            $.ajax({
                url:"/admin/select_user",
                type:"get",
                data:"username="+uname,
                dataType:"html",
                success:function(res){
                    $(".uname").html(res);
                    $(".uname li").hover(function(){
                        $(this).css({"background-color":"#ccc","cursor":"pointer"});
                    },function(){
                        $(this).css("background-color","#fff");
                    });
                    $(".uname li").click(function(){
                        user_id = $(this).attr("uid");
                        $("#user_name").val($(this).html());
                        $(".uname li").remove();
                        console.log(user_id);
                    })
                }
            })
　　　　});
        
    </script>
  </body>

</html>